<template>
  <div class="ChildPage ApiPage TablePage">
    <div class="Tree">
      <div class="Tree_search">
        <el-input size="mini" v-model="searchGroupName" placeholder="搜索分组名称" clearable></el-input>
      </div>
      <div class="Tree_list">
        <div class="Tree_list_li" :class="activePageRouterId===item.id?'is-active':''" v-for="item in pageRouterList"
             v-bind:key="item.id" v-on:click="activePageRouterId = item.id" v-show="!searchGroupName || item.name.includes(searchGroupName)">
          <i class="vbl " :class="activePageRouterId===item.id?'vbl-wenjianjia':'vbl-wenjianjia1'"></i>
          <div class="Tree_list_li_name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="Table">
      <vb-table :option="option" ref="table"
                @row-del="rowDel"
                @row-update="rowUpdate"
                @row-save="rowSave"
                @form-open="onFormOpen"
                @on-load="getList">
        <template #headerSearch-append>
          <el-checkbox size="small" border v-model="showSystem" class="top_search_checkbox">包含系统接口</el-checkbox>
        </template>
      </vb-table>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  data() {
    let self = this
    return {
      searchGroupName: null,
      showSystem: false,
      option: {
        selection: false,
        index: true,
        column: [
          {
            label: "接口名称",
            prop: "name",
            minWidth: 200,
            search: {
              show: true,
              label: "关键词",
              prop: "searchKey",
              hiddenLabel: true,
              placeholder: "\ue605 名称/key/路径/备注"
            },
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "接口key",
            prop: "key",
            align: "left",
            width: 200,
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "系统接口",
            prop: 'isSystem',
            type: "switch",
            width: 80,
            align: "center",
            effectTrueLabel: '是',
            effectFalseLabel: '否',
            formShow: false
          },
          {
            label: "接口方式",
            prop: "method",
            align: "center",
            type: "select",
            width: 80,
            dicData: [
              {
                id: 'post',
                label: "json"
              },
              {
                id: 'get',
                label: "get"
              },
              {
                id: 'upload',
                label: "上传"
              },
              {
                id: 'download',
                label: "下载"
              }
            ],
            form: {
              default: "post",
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "接口路径",
            prop: 'path',
            width: 240,
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "页面分组",
            prop: 'pageRouterIdList',
            type: "select",
            dicLabel: "name",
            width: 350,
            form: {
              span: 24,
              multiple: true,
              filterable: true,
              remoteMethod: function (row, form, done) {
                self.getPageList(done)
              }
            },
          },
          {
            label: "排序",
            prop: 'sort',
            width: 80,
            align: "center",
            type: "inputNumber"
          },
          {
            label: "接口备注",
            prop: 'remark',
            type: "textarea",
            form: {
              span: 24
            }
          }
        ],
        form: {
          width: 800
        },
        handleBtnList: [
          {
            key: "edit",
            vIf: function (item) {
              return !item.isSystem
            }
          },
          {
            key: "delete",
            vIf: function (item) {
              return !item.isSystem
            }
          }
        ]
      },
      pageRouterList: [],
      activePageRouterId: null
    }
  },
  computed: {},
  mounted() {
  },
  methods: {

    /**
     * 查询数据列表信息
     * @param page
     * @param size
     * @param search 检索条件
     * @param done
     */
    getList(page, size, search, done) {
      this.$api.getApiList(Object.assign({
        pageIndex: page,
        pageSize: size,
        pageRouterId: this.activePageRouterId,
        showSystem: this.showSystem
      }, search)).then(res => {
        done(res)
      })
    },

    /**
     * 新增数据处理
     * @param form
     * @param done
     */
    rowSave(form, done) {
      this.$api.addApi(form).then((res) => {
        done(res)
      })
    },

    /**
     * 更新数据处理
     * @param form
     * @param done
     */
    rowUpdate(form, done) {
      this.$api.updateApi(form).then((res) => {
        done(res)
      })
    },

    /**
     * 删除数据处理
     * @param ids
     * @param done
     */
    rowDel(ids, done) {
      this.$api.deleteApi({
        ids: ids
      }).then((res) => {
        done(res)
      })
    },

    /**
     * 查询页面路由
     * @param done
     */
    getPageList(done) {
      let self = this
      this.callApi("getPageList", {
        pageSize: 10000
      }).then(res => {
        done(res.data)
        self.pageRouterList = JSON.parse(JSON.stringify(res.data))
        self.pageRouterList.splice(0, 0, {
          id: null,
          name: "全部"
        })
        self.pageRouterList.push({
          id: "other",
          name: "其他"
        })
      })
    },

    /**
     * 表单打开事件
     * @param type
     */
    onFormOpen(type) {
      if (type === 'add'&& this.activePageRouterId && this.activePageRouterId.length && this.activePageRouterId !== 'other') {
        this.$refs.table.setFormValueByProp("pageRouterIdList", [this.activePageRouterId])
      }
    }
  },
  watch: {
    activePageRouterId: function () {
      this.$refs.table.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.ApiPage{
  display: flex;
  .Tree{
    width: 200px;
    border-right: 1px solid var(--border-bc);
    margin-right: 10px;
    padding-right: 10px;
    flex-shrink: 0;
    .Tree_search{
      width: 100%;
      padding-top: 10px;
    }
    .Tree_list{
      overflow: auto;
      height: calc(100% - 60px);
      margin-top: 10px;
      .Tree_list_li{
        height: 35px;
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0px 15px;

        &:hover,
        &.is-active {
          background: var(--primary-light);
          i{
            color: var(--warning);
          }
          .Tree_list_li_name{
            color: var(--primary);
          }
        }

        i {
          margin-right: 10px;
          color: var(--font-hc);
        }

        .Tree_list_li_name {
          width: calc(100% - 60px);
          font-size: 14px;
        }
      }
    }
  }
  .Table{
    flex: 1;
    width: calc(100% - 220px);
    .top_search_checkbox {
      margin-right: 10px;
    }
  }
}
</style>
